<template>
    <div>
        <!-- 头部 -->
        <van-nav-bar title="商品详情" left-arrow @click-left="onClickLeft" />
        <!-- 轮播图 -->
        <van-swipe class="swiper" autoplay="2000">
      <van-swipe-item v-for="(item, index) in bannerArr" :key="index">
        <img :src="item" style="width: 100%; height: 100%" />
      </van-swipe-item>
      <template #indicator="{ active, total }">
        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
      </template>
    </van-swipe>
    <!-- 详情信息 -->
    <p class="pro-info">
        <span class="market">坤坤超市</span>{{ goodsData.proname }}
    </p>
    <p class="pro-info">
        价格：<span class="num">￥{{ goodsData.originprice}}</span> 销量：<span class="num">￥{{  goodsData.sales }} </span>
        <van-stepper v-model="pronum " />
    </p>
    
    <van-action-bar>
  <van-action-bar-icon icon="chat-o" text="客服"  />
  <van-action-bar-icon :badge='cartnum' icon="cart-o" text="购物车" @click="onClickIcon" />
  <van-action-bar-icon icon="shop-o" text="店铺"  />
  <van-action-bar-button type="danger" text="加入购物车" @click="onClickButton" />
</van-action-bar>
    </div>
</template>

<script setup lang="ts">
import { reactive,ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import{goodsDetailAPI } from "../../api/goods"
import{IGoods} from "../../utils/type"
import{ addCartAPI,getCartListAPI} from"../../api/cart"
import { showNotify } from "vant";

let $router = useRouter()
let $route = useRoute();
// 拿到了商品的id
// console.log($route.query.proid);
let goodsData: IGoods = reactive<IGoods>({});
let bannerArr:Array<string> = reactive<Array<string>>([])


function loadGoodsDetail(){
    goodsDetailAPI($route.query.proid).then((res)=>{
        // console.log(res);
        if(res.data.code == 200){
            // 把数据push到bannerArr数组里面
            bannerArr.push(res.data.data.img1)
            bannerArr.push(res.data.data.img2)
            bannerArr.push(res.data.data.img3)
            bannerArr.push(res.data.data.img4)
            // 给商品数据赋值
            goodsData.proname =  res.data.data.proname
            goodsData.originprice = res.data.data.originprice
            goodsData.sales = res.data.data.sales
            goodsData.proid = res.data.data.proid
        }
        
    })
}
loadGoodsDetail()
// 添加购物车的数据
let pronum =ref<number>(1)
// 点击添加购物车按钮的时候，将当前商品添加到购物车中
// 需要去配置请求头
const onClickButton=()=>{
    addCartAPI({
    userid: localStorage.getItem("app-userid"),
    proid: goodsData.proid,
    num: pronum.value,
    }).then((res)=>{
        // console.log(res);
        if (res.data.code == 200) {
      showNotify({ type: "success", message: res.data.message });
    //   添加成功更新数据
      loadCartNumber();
    }
        
    })
}

// 购物车中商品品类数量
let cartnum = ref<number>(0);
// 在进入这个页面或者是给购物车中添加新的商品的时候，都需要更新购物车图标上的数字
const loadCartNumber=()=>{
    getCartListAPI({
        userid: localStorage.getItem("app-userid"),
    }).then((res)=>{
        if (res.data.code == 200) {
      cartnum.value = res.data.data.length;
    }
    })
}
loadCartNumber();
// 点击购物车图标，跳转到购物车页面
const onClickIcon = () => {
  $router.push("/cart");
};

// 返回上一个页面
function onClickLeft() {
  $router.back();
}
</script>

<style scoped >
.swiper {
  height: 300px;
  /* background-color: #0af; */
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.pro-info{
    margin: 20px 20px;
    line-height: 1.5em;
  font-size: 14px;
}
.market{
    background-color: red;
    color: #fff;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 12px;
    
}
.num {
  font-size: 18px;
  color: #f66;
  margin-right: 20px;
}
</style>